<%--
  Created by IntelliJ IDEA.
  User: 13044
  Date: 2020/6/8
  Time: 14:45
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/callus.css">
    <script type="text/javascript"
            src="//api.map.baidu.com/api?type=webgl&v=1.4&ak=9ivwUzBCN6M6kdX8Y1hPgxxAAKgKW8So"></script>
</head>

<body>
<jsp:include page="top.jsp"></jsp:include>
<div class="middle">
    <div class="callus">联系我们</div>
    <div id="allmap" style="width: 1000px;height: 500px;margin: auto"></div>
</div>
<script type="text/javascript">
    // GL版命名空间为BMapGL
    // 按住鼠标右键，修改倾斜角和角度
    var map = new BMapGL.Map("allmap");    // 创建Map实例
    var point = new BMapGL.Point(104.066356, 30.579334);
    map.centerAndZoom(point, 11);  // 初始化地图,设置中心点坐标和地图级别
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
    var marker = new BMapGL.Marker(point);
    map.addOverlay(marker);              // 将标注添加到地图中
    var opts = {
        width: 200,     // 信息窗口宽度
        height: 100,     // 信息窗口高度
        title: "故宫博物院", // 信息窗口标题
        message: "这里是故宫"
    }
    var infoWindow = new BMapGL.InfoWindow("地址：北京市东城区王府井大街88号乐天银泰百货八层", opts);  // 创建信息窗口对象
    marker.addEventListener("click", function () {
        map.openInfoWindow(infoWindow, point); //开启信息窗口
    });
</script>
<jsp:include page="foot.jsp"></jsp:include>
</body>
</html>
